<template>
  <div>
    <el-container style="background-color: #f3f5f4">
      <el-header height='170px'>
        <div style="box-shadow:0 2px 0px #08B4A0;height:160px;width:100%;">
          <div style="float:left;width:100%;height:40px;background-color:#999999">
            <div style="float:right;width:120px;height:30px;">
              <el-button type="text" style="float:right;color:white">立即注册</el-button>
              <div style="background-color:white;width:2px;height:14px;float:right;margin-top:13px;margin-left:2px;margin-right:2px;">
              </div>
              <el-button type="text" style="float:right;color:white">登录</el-button>
            </div>
          </div>
          <img src="../../assets/logo.png" style="margin-left:20px;float:left;width:150px;height:120px;margin-top:1px;background-color: #555555;" />
          <div class="mdtabs">
            <el-menu :default-active="1" class="el-menu-demo" active-text-color="#08B4A0" mode="horizontal" @select="handleChange">
              <el-menu-item index="1">我的</el-menu-item>
              <el-menu-item index="2">猎手中心</el-menu-item>
              <el-menu-item index="3">悬赏中心</el-menu-item>
            </el-menu>
          </div>
          <div style="float:right;width:120px;height:130px;margin-top:80px;">
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                会员中心
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>我的</el-dropdown-item>
                <el-dropdown-item>猎手中心</el-dropdown-item>
                <el-dropdown-item>悬赏中心</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main class="mainContainer">
        <router-view/>
      </el-main>
      <el-footerself>
        <div class="outclass">
          <div class="outclass" style="float:left;width:66%;margin-top:1px;">
            <el-row style="position:relative;left:20px;">
              <el-button type="text" style="float:left;color:black">关于我们</el-button>
              <el-button type="text" style="float:left;margin-left:60px;color:black">招贤纳士</el-button>
              <el-button type="text" style="float:left;color:black;margin-left:60px;">联系我们</el-button>
              <el-button type="text" style="float:left;color:black;margin-left:60px;">帮助中心</el-button>
            </el-row>
            <div class="footerself-top">
              <ul>
                <li>
                  <dl class="link-list">
                    <dd>
                      <a href="/help/help1-1.htm">xx网站</a>
                    </dd>
                    <dd>
                      <a href="/help/help1-2.htm">xx网站</a>
                    </dd>
                    <dd>
                      <a href="/help/help1-3.htm">xx网站</a>
                    </dd>
                    <dd>
                      <a href="/help/help1-4.htm">xx网站</a>
                    </dd>
                  </dl>
                </li>
                <li>
                  <dl class="link-list">
                    <dd>
                      <a href="/help/help2-1.htm">常见问题</a>
                    </dd>
                    <dd>
                      <a href="/help/help2-2.htm">更多帮助</a>
                    </dd>
                    <dd>
                      <a href="/help/help2-3.htm">意见反馈</a>
                    </dd>
                    <dd>
                      <a href="/help/help2-4.htm">隐私权条款</a>
                    </dd>
                  </dl>
                </li>
                <li>
                  <dl class="link-list">
                    <dd>
                      <a href="/help/help3-1.htm">新浪微博</a>
                    </dd>
                    <dd>
                      <a href="/help/help3-2.htm">官方微信</a>
                    </dd>
                  </dl>
                </li>
                <li>
                  <dl class="link-list">
                    <dd>
                      <a href="/help/help2-1.htm">常见问题</a>
                    </dd>
                    <dd>
                      <a href="/help/help2-2.htm">更多帮助</a>
                    </dd>
                    <dd>
                      <a href="/help/help2-3.htm">意见反馈</a>
                    </dd>
                    <dd>
                      <a href="/help/help2-4.htm">隐私权条款</a>
                    </dd>
                  </dl>
                </li>
              </ul>
            </div>
            <div style="height:20px;margin-top:1px;width:1000px;margin-left:20px;">
              <p style="font-size:12px">Copyright © 2018-2022All Rights Reserved 版权所有潍坊猎户网络科技有限公司</p>
            </div>
          </div>
          <div class="outclass" style="float:right;width:34%;height:140px;margin-top:1px;">
            <div style="float:left;width:50%;height:140px;">
              <img src="../../assets/logo.png" style="width:80px;height:80px;" />
              <p>赏金猎手APP</p>
            </div>
            <div style="float:right;width:50%;height:140px;">
              <img src="../../assets/logo.png" style="width:80px;height:80px;" />
              <p>赏金猎手微信公众号</p>
            </div>
          </div>
        </div>
        <div class="fotBtmIcon">
          <a id="fotBm_0" href="//fanqizha.58.com" tongji_tag="fqz_58homepage_footer2_click"></a>
          <a id="fotBm_1" href="//report.12377.cn:13225/toreportinputNormal_anis.do"></a>
          <a id="fotBm_2" href="//www.12377.cn/node_548446.htm"></a>
          <a id="fotBm_3" href="//img.58cdn.com.cn/ui6/index/qyxinyong.jpg?v=3"></a>
          <a id="fotBm_4" href="//img.58cdn.com.cn/ui6/index/qyxinyong.jpg?v=3"></a>
          <a id="fotBm_5" href="//about.58.com/fqz/index.html"></a>
        </div>
        <!-- <div class="footerself">
                <div class="footerself-con">
                    <div class="footerself-top">
                        <ul>
                            <li>
                                <dl class="link-list">
                                    <dd><a href="/help/help1-1.htm">xx网站</a></dd>
                                    <dd><a href="/help/help1-2.htm">xx网站</a></dd>
                                    <dd><a href="/help/help1-3.htm">xx网站</a></dd>
                                    <dd><a href="/help/help1-4.htm">xx网站</a></dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="link-list">
                                    <dd><a href="/help/help2-1.htm">常见问题</a></dd>
                                    <dd><a href="/help/help2-2.htm">更多帮助</a></dd>
                                    <dd><a href="/help/help2-3.htm">意见反馈</a></dd>
                                    <dd><a href="/help/help2-4.htm">隐私权条款</a></dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="link-list">
                                    <dd><a href="/help/help3-1.htm">新浪微博</a></dd>
                                    <dd><a href="/help/help3-2.htm">官方微信</a></dd>
                                </dl>
                            </li>
                            <li>
                                <dl class="link-list">
                                    <dd><a href="/help/help2-1.htm">常见问题</a></dd>
                                    <dd><a href="/help/help2-2.htm">更多帮助</a></dd>
                                    <dd><a href="/help/help2-3.htm">意见反馈</a></dd>
                                    <dd><a href="/help/help2-4.htm">隐私权条款</a></dd>
                                </dl>
                            </li>
                        </ul>
                    </div>
                    <div class="footerself-bottom">
                        <div class="link fl">
                            <a href="/aboutUs.htm">关于我们</a>
                            <a href="/timeLine.htm">发展历程</a>
                            <a href="/contactUs.htm">联系我们</a>
                            <a href="/recruiting.htm">人才招募</a>
                        </div>
                        <div class="copyRight fr">
                            <a href="http://www.shca.gov.cn/" target="_blank">沪B2-20150145</a>
                            <a href="http://www.miitbeian.gov.cn/" target="_blank">沪ICP备13006480号-2</a>
                            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31011302004261" class="beian-link"><img src="picture/beian-icon.d0289dc.png">沪公网安备 31011302004261号</a>
                        </div>
                        <div class="footerself-copyRight">
                            <p>增值电信业务经营许可证</p>
                            <p>沪B2-20150145沪ICP备13006480号-2</p>
                            <p>沪公安网备 31011302004261号Copyright 2015-2020</p>
                            <p>www.hunteron.com</p>
                        </div>
                    </div>
                </div>
            </div> -->
      </el-footerself>
    </el-container>
  </div>
</template>
<style scoped>
.mainContainer {
  padding: 0;
  height: 100%;
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.logo {
  width: 200px;
  height: 150px;
}

.mdtabs {
  float: left;
  padding-left: 180px;
  padding-top: 60px;
}

html,
body,
#app {
  padding: 0;
  margin: 0;
  height: 100%;
}

.container {
  height: 100%;
}
/*==========footerself==========*/
.footerself {
  margin-top: 50px;
  background: url("../../assets/logo.png") left top no-repeat #141414;
  background-size: 100% auto;
}

.footerself-con {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.footerself-top {
  /* padding-top:50px;
    overflow:hidden; */
}

.footerself-top ul {
  padding: 0;
  margin: 0;
  min-width: 120px;
  margin-right: 10px;
  list-style: none;
}

.footerself-top::after {
  content: "";
  display: table;
  clear: both;
}

.footerself-top ul::after {
  content: "";
  display: table;
  clear: both;
}

.footerself-top ul li {
  float: left;
  min-width: 120px;
  margin-right: 0px;
  list-style: none;
}

.footerself-top ul li:last-child {
  margin-right: 0;
}

.footerself-top .company-info img {
  width: 193px;
  margin-bottom: 30px;
}

.footerself-top .company-info p {
  color: #999;
}

.footerself-top .company-info p b {
  color: #fff;
  font-size: 20px;
  margin-right: 5px;
}

.footerself-top .company-info h3 {
  margin-top: 10px;
  color: #FA3E25;
  font-size: 20px;
}

.footerself-top .company-info span {
  font-size: 18px;
  margin-left: 5px;
}

.footerself-top .link-list dt {
  color: #fff;
  font-size: 18px;
  margin-bottom: 10px;
  text-align: left;
}

.footerself-top ul li::after {
  content: "";
  display: table;
  clear: both;
}

.footerself-top .link-list dd {
  padding-left: 20px;
  margin: 0;
  line-height: 26px;
  text-align: left;
  display: block;
}

.footerself-top .link-list dd a {
  color: #999;
  text-decoration: none;
  font-size: 12px;
}

.footerself-top .link-list dd a:hover {
  text-decoration: underline;
}

.footerself-bottom {
  line-height: 60px;
}

.footerself-copyRight {
  display: none;
}

.footerself-bottom .link {
  margin: 23px 0;
}

.footerself-bottom a {
  float: left;
  color: #999;
  margin-right: 15px;
  padding-right: 15px;
  border-right: 1px solid #999;
  line-height: 14px;
}

.footerself-bottom a:hover {
  text-decoration: underline;
}

.footerself-bottom .link a:last-child,
.footerself-bottom .copyRight a:last-child {
  border-right: 0;
}

.footerself-bottom .copyRight {
  color: #999;
  margin: 23px 0;
}

#wrap a {
  color: #FFF;
}

#wrap a:hover {
  color: #f13f6a;
}

.wrapW a {
  color: #FFF;
}

.wrapW {
  width: 1010px;
  margin: 0 auto;
}

.wrapW a:hover {
  color: #f13f6a;
}

.link p {
  display: inline-block;
  width: 60%;
  float: left;
  padding: 10px 0;
  font-size: 14px;
}

.information {
  clear: both;
  position: relative;
  width: 100%;
  height: 45px;
  line-height: 45px;
  background: #000;
  color: #FFF;
  text-align: center;
}

#eventList {
  margin-top: 20px;
}

#eventList .event {
  display: inline-block;
  margin: 0 15px 20px;
  text-align: center;
}

#eventList .eventTitle {
  display: block;
  padding: 10px;
  font-size: 16px;
}

#eventList .event img {
  width: 289px;
  height: 122px;
}
</style>
<script>
export default {
  data: function() {
    return {
      radio: '我的'
    }
  },
  methods: {
    handleChange: function(args) {
      console.log(args)
      if (args === '1') {
        this.$router.push({ path: '/vipcenter/mine' })
      } else if (args === '2') {
        this.$router.push({ path: '/vipcenter/mine' })
      } else if (args === '3') {
        this.$router.push({ path: '/vipcenter/bountycenter' })
      }
    }
  }
}
</script>
